<template>
	<view class="page-cont" :style="useTheme.theme">
		<navbar :title="navTitle" v-if="tabbarIndex != 0 && tabbarIndex != 3"></navbar>
		<view class="main-cont" :style="{height: (tabbarIndex == 0 || tabbarIndex == 3) ? pageCustomHeight : pageHeight}">
			<home v-if="tabbarIndex == 0"></home>
			<energy v-if="tabbarIndex == 1"></energy>
			<!-- <maintain v-if="tabbarIndex == 2"></maintain> -->
			<warn v-if="tabbarIndex == 2"></warn>
			<mine v-if="tabbarIndex == 3"></mine>
		</view>
		<tabbar @tabIndexChange="handleTabIndexChange" @tabTextChange="handleTabTextChange"></tabbar>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, getCurrentInstance } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { useNavbar } from "@/utils/hooks.js";
	const { pageHeight, pageCustomHeight } = useNavbar();
	import tabbar from '@/components/tabbar.vue';
	import home from '@/pages/home/index.vue';
	import energy from '@/pages/energy/index.vue';
	import maintain from '@/pages/maintain/index.vue';
	import warn from '@/pages/warn/index.vue';
	import mine from '@/pages/mine/index.vue';
	import useThemeStore from '@/store/theme';
	const useTheme = useThemeStore();
	const tabbarIndex = ref(0)
	const navTitle = ref("")

	onShow(() => {

	});

	onLoad(() => {

	});

	function handleTabIndexChange(e) {
		tabbarIndex.value = e;
	}

	function handleTabTextChange(e) {
		navTitle.value = e;
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		height: 100vh;
	}
</style>